<template>
	<view>
		<!-- 患者卡片 -->
		<view class="fa pp10" v-if="false">
			<image src="/static/img/user.png" mode="widthFix" class="wid36 mr15"></image>
			<view class="f14 f1">
				<view class="fa">
					<view class="mr20 text-ellipsis w-20">
						{{ user.name }}
					</view>
					<view class=""> {{ setStatus(user.gender) }}/{{ user.age }}岁 </view>
				</view>
				<view class="c84">
					<!-- {{xtData.diseaseDescription || ''}} -->
				</view>
			</view>
			<view class="f15 c2d"> 查看 </view>
		</view>
		<!-- 功能列表 -->

		<u-sticky>
			<view class="fj p20" style="
            background-color: #8ebcff;
            height: 90rpx;
            align-items: center;
            color: white;
            font-size: 32rpx;">
				<view class="" v-for="(i, index) in tag_list" :key="i" @click="sele = index" :class="{ sele: sele == index }">
					{{ i }}
				</view>
			</view>
		</u-sticky>

		<!-- 聊天功能 -->
		<view class="" v-if="sele == 0">
			<view class="chat-time" v-if='messageFlag'>
				<text @click="messageS()" style="color: blue;">加载更多</text>
			</view>
			<view v-if="loadFlag">
				<u-loading-icon></u-loading-icon>
			</view>
			<view class="box-1" id="list-box" @click="indexs = null">
				<view class="talk-list">
					
					<!-- :extra="Relationship" -->
					<view >
						<uni-card title="病情描述" :is-shadow='true' :isFull="true" >
							<text class="size_14" style="letter-spacing: 10rpx;line-height: 24rpx;">
								{{interrogationInfo.diseaseDescription}}
							</text>
						</uni-card>
					</view>
					
					<view class="" v-for="(item, index) in talkLists" :key="index">
						<view v-if="!item.isRetract && item.type != 5">
							<view class="chat-time" v-if="shouldDisplayTimestamp(index)">
								{{ dateChange(item.createTime) }}
							</view>
							<view class="item flex_col" :class="item.fromId == unameId ? 'push' : 'pull'">

								<u-avatar :src="item.fromId == unameId ? '/static/online/doctor.png' : userAvatar"></u-avatar>


								<view class="content" v-if="item.type == 1" @click="onLongPress($event, item, 1)">
									<!-- 文字 -->
									<text>{{ item.content }}</text>
								</view>
								<!-- 图片 -->
								<view class="contents" v-else-if="item.type == 2" @longpress="onLongPress($event, item, 2)"
									@click="showPic(item.content)">
									<image :src="item.content" mode="widthFix" class="imagepic"></image>
								</view>

								<!-- 音频 -->
								<view class="message msg-voice content" @longpress="onLongPress($event, item, 3)" v-if="item.type == 3">
									<view class="msg-text voice" @tap="playVoice(item, index)"
										:style="{ width: (item.second < 7 ? 7 : item.second > 20 ? 20 : item.second) * 8 + 'px' }">
										<image v-if="!VoiceFlag" src="../../static/img/chat/yyl.png" class="voice-img">
										</image>
										<image v-if="VoiceFlag" src="../../static/img/chat/voice-l.gif" class="voice-img" @click="pauseVoice">
										</image>
										{{ item.second }}
									</view>
								</view>

								<!-- 视频 -->
								<view class="message" v-if="item.type == 4" @longpress="onLongPress($event, item, 4)">
									<video class="msg-img" :src="item.content" controls></video>
								</view>

								<view class="mask" @click.stop="requestFullScreen"></view>

								<!-- 重发 -->
<!-- 								<view class="pt-20" v-if="item.readStatus == 0 && item.fromId == unameId" @click="reloadMessage(item)">
									<u-loading-icon></u-loading-icon>
								</view> -->
							</view>
						</view>
						<view v-if='item.isRetract && item.fromId == unameId' class="chat-time">
							<view class="chat-time" v-if="shouldDisplayTimestamp(index)">
								{{ dateChange(item.createTime) }}
							</view>
							您撤回了一条信息 <text class="text-blue" @click="cxbj(item)"
								v-if="Date.now() - (new Date(item.createTime).getTime()) > 120000 ? false : true">重新编辑</text>
						</view>

						<view v-if='item.isRetract && item.fromId != unameId' class="chat-time">
							<view class="chat-time" v-if="shouldDisplayTimestamp(index)">
								{{ dateChange(item.createTime) }}
							</view>
							{{ item.unickname }}撤回了一条信息
						</view>

						<!-- 结单申请 -->
						<view class="chat-time" v-if="item.type == 5">
							<view class="chat-time" v-if="shouldDisplayTimestamp(index)">
								{{ dateChange(item.createTime) }}
							</view>
							您发起了结束聊天问诊申请
						</view>

					</view>
				</view>
			</view>

			<!-- 输入框 -->
			<view class="box-2">
				<view class="fj p20" style="align-items: center">
					<view class="wid30 mr10" style="margin-right: 10rpx" @click="getAn()">
						<uni-icons type="sound-filled" size="28" v-if="!flag"></uni-icons>
						<uni-icons type="chat" size="30" v-else></uni-icons>
					</view>
					<view class="flex_grow" v-if="!flag">
						<input v-model="content" type="text" focus placeholder="请输入内容..." class="mr10 nr" />
					</view>
					<view class="flex_grow" style="text-align: center; background-color: #fff; line-height: 64rpx;" v-else
						@longpress="handleTouchStart" @touchend="endRecord">
						<view class="">
							按住说话
						</view>
					</view>

					<view class="flex_col-left" @click="open" v-if="content == ''">
						<uni-icons type="plusempty" size="20"></uni-icons>
					</view>

					<button class="send" v-else @touchend.prevent="sendMsgs()">发送</button>
				</view>
			</view>

			<!-- 消息气泡 -->
			<view class="shade" v-show="showShade" @tap="hidePop">
				<view class="pop" :style="popStyle" :class="{ show: showPop }">
					<view v-for="(item, index) in popButton" :key="index" @tap="pickerMenu" :data-index="index">
						{{ item }}
					</view>
				</view>
			</view>

			<uni-popup ref="popup" type="bottom">
				<view class="jieshao">
					<view class="jieshao-yi" v-for="(val, i) in gongneng" :key="i" @click="getEvent(val.mc)" @close='closePopup'>
						<image :src="val.img" mode=""></image>
						<view class="jieshao-yi-wz">
							{{ val.mc }}
						</view>
					</view>
				</view>
			</uni-popup>

		</view>


		<!-- 患者资料 -->
		<view class="" v-else-if="sele == 1">
			<view class="" v-if="xtData">
				<u-cell>
					<view slot="title" class="u-slot-title">
						<text class="u-cell-text pr-2">姓名</text>
						<text class="u-cell-text">{{ xtData.xtName || "默认名称" }}</text>
					</view>
				</u-cell>
				<u-cell>
					<view slot="title" class="u-slot-title">
						<text class="u-cell-text pr-2">性别</text>
						<text class="u-cell-text">{{ setStatus(xtData.xtGender) || "未知" }}</text>
					</view>
				</u-cell>
				<u-cell>
					<view slot="title" class="u-slot-title">
						<text class="u-cell-text pr-2">问诊人关系</text>
						<text class="u-cell-text">{{ setXtRelationship(xtData.xtRelationship) }}</text>
					</view>
				</u-cell>
				<u-cell>
					<view slot="title" class="u-slot-title">
						<text class="u-cell-text pr-2">年龄</text>
						<text class="u-cell-text">{{ xtData.xtAge }}</text>
					</view>
				</u-cell>
				<u-cell>
					<view slot="title" class="u-slot-title">
						<text class="u-cell-text pr-2">身高</text>
						<text class="u-cell-text">{{ xtData.height || '--'}}/cm</text>
					</view>
				</u-cell>
				<u-cell>
					<view slot="title" class="u-slot-title">
						<text class="u-cell-text pr-2">体重</text>
						<text class="u-cell-text">{{ xtData.weight || '--' }}/kg</text>
					</view>
				</u-cell>
				<u-cell>
					<view slot="title" class="u-slot-title">
						<text class="u-cell-text pr-2">病史</text>
						<text class="u-cell-text">{{ xtData.allergicHistory || '暂无' }}</text>
					</view>
				</u-cell>
				<u-cell>
					<view slot="title" class="u-slot-title">
						<text class="u-cell-text pr-2">过敏史</text>
						<text class="u-cell-text">{{ xtData.medicalHistory || '暂无' }}</text>
					</view>
				</u-cell>
			</view>
			<view class="h-40 flex-cen" v-else>
				'患者信息不存在'
			</view>
		</view>

		<!-- 填写结果 -->
		<view class="" v-else-if="sele == 2" style="padding-bottom: 200rpx">
			<view class="">
				<uni-section type="line" title="主诉"></uni-section>
				<view class="p20">
					<input type="text" v-model="form.description" placeholder="请填写患者症状、体征等" style="
              font-size: 24rpx;
              background-color: #f5f5f5;
              padding: 20rpx;
              border-radius: 10rpx;
              padding-bottom: 50rpx;
			  height: 50px;
            " />
				</view>
			</view>
			<view class="">
				<uni-section type="line" title="诊断"></uni-section>
				<view class="p20">
					<input type="text" v-model="form.diagnose" placeholder="请填写" style="
              font-size: 24rpx;
              background-color: #f5f5f5;
              padding: 20rpx;
              border-radius: 10rpx;
              padding-bottom: 50rpx;
			  height: 50px;
            " />
				</view>
			</view>
			<view class="">
				<uni-section type="line" title="问诊建议"></uni-section>
				<view class="p20">
					<input type="text" v-model="form.consultationSuggestion" placeholder="请填写" style="
              font-size: 24rpx;
              background-color: #f5f5f5;
              padding: 20rpx;
              border-radius: 10rpx;
              padding-bottom: 50rpx;
			  height: 50px;" />
				</view>
			</view>
			<view class="fa" @click="yesOrNo2">
				<uni-section type="line" title="行动不便" class="f1"></uni-section>
				<view class="fa mr20">
					<view class="mr10" v-if="form.isMoveDifficult" style="height: 50rpx" >
						是
					</view>
					<view class="mr10" v-else style="height: 50rpx">
						否
					</view>
					<image src="/static/img/rit.png" mode="widthFix" class="wid10"></image>
				</view>
			</view>

			<view class="fa" @click="yesOrNo3">
				<uni-section type="line" title="是否用药" class="f1"></uni-section>
				<view class="fa mr20">
					<view class="mr10" v-if="yongyao" style="height: 50rpx" >
						是
					</view>
					<view class="mr10" v-else style="height: 50rpx" >
						否
					</view>
					<image src="/static/img/rit.png" mode="widthFix" class="wid10"></image>
				</view>
			</view>

			<view class="fa" @click="yesOrNo1">
				<uni-section type="line" title="病情稳定需长期服药" class="f1"></uni-section>
				<view class="fa mr20">
					<view class="mr10" v-if="form.isLongtime" style="height: 50rpx" >
						是
					</view>
					<view class="mr10" v-else style="height: 50rpx" >
						否
					</view>
					<image src="/static/img/rit.png" mode="widthFix" class="wid10"></image>
				</view>
			</view>
			<!-- 添加药品 -->
			<view class="fa" v-if="yongyao">
				<uni-section type="line" title="添加商品" class="f1"></uni-section>
				<view class="fa mr20">
					<button @click="goShop" style="
              color: #2d81ff;
              border: 1px solid #2d81ff;
              background-color: transparent;
              border-radius: 30rpx;
              width: 160rpx;
              height: 56rpx;
              font-size: 32rpx;
              line-height: 56rpx;">
						+新增
					</button>
				</view>
			</view>

			<view class="margin" v-if="form.productList.length != 0">
				<view class="mt10" style="
            background-color: #eff5ff;
            min-height: 180rpx;
            border-radius: 10rpx;
            padding: 40rpx;">
					<view class="mt10" v-for="(item, index3) in form.productList" :key="index3">
						<view class="fa f14">
							<image src="/static/online/yao.png" mode="widthFix" style="width: 100rpx" class="mr10">
							</image>
							<view class="f1">
								<view class="fa">
									<view class="f1">
										{{ item.uproductName }}
									</view>
									<view class=""> ￥{{ item.uretailPrice }} </view>
								</view>
								<view class="mt5 fa">
									<view class="f1">
										{{ item.uproductSpecs }}
									</view>
									<view class="">
										<u-number-box v-model="item.count" integer></u-number-box>
									</view>
								</view>
							</view>
						</view>
						<view class="c84 mt10"> 用法用量：{{ form.usageMethod }} </view>
					</view>
				</view>
			</view>
			<!-- 用药建议 -->
			<view class="">
				<uni-section type="line" title="用药建议"></uni-section>
				<view class="p20">
					<input type="text" v-model="form.medicationSuggestion" placeholder="请填写" style="
              font-size: 24rpx;
              background-color: #f5f5f5;
              padding: 20rpx;
              border-radius: 10rpx;
              padding-bottom: 50rpx;
			  height: 50px;
            " />
				</view>
			</view>
			<!-- 提交 -->
			<view class="pp20" style="margin-top: 100rpx">
				<button @click="setPrescription" style="
            background-color: #2d81ff;
            border-radius: 50rpx;
            color: white;
            font-size: 32rpx;
          ">
					提交
				</button>
			</view>
		</view>
	</view>
</template>

<script>
import {
	mapState,
	mapActions,
	mapMutations,
	mapGetters
} from "vuex";
import {
	getTimeStringAutoShort,
	fileName,
	uploadFile
} from "@/utils/myFun.js";
export default {
	data() {
		return {
			interrogationInfo:{},
			
			
			/* 显示遮罩 */
			showShade: false,
			popStyle: "",
			popButton: ["复制", "删除", "撤回"],
			showPop: false,
			gongneng: [{
				img: "/static/img/gongneng/ba.png",
				mc: "图片",
				unl: "",
			},
			{
				img: "/static/img/gongneng/jiu.png",
				mc: "拍照",
				unl: "",
			},
			{
				img: "/static/img/gongneng/shi.png",
				mc: "视频",
				unl: "",
			},
			{
				img: "/static/img/gongneng/shiyi.png",
				mc: "语音",
				unl: "",
			},
			],
			// friendName: '',
			/* 聊天参数 */
			message: {
				type: 1,
				fromId: "",
				messageType: "0",
				messageId: "",
				toId: "",
				content: "",
				createTime: "",
			},
			show: false,
			/* 切换 */
			sele: 0,
			flag: false,
			/* 分类 */
			tag_list: ["会话交流", "患者资料", "填写结果"],
			yongyao: false,
			/* 聊天列表区分 */
			unameId: uni.getStorageSync("ID"),
			form: {
				consultationSuggestion: "",
				description: "",
				diagnose: "",
				isLongtime: false,
				isMoveDifficult: false,
				medicationSuggestion: "",
				productList: [],
				userId: "",
			},
			user: {
				name: "",
				gender: "",
				avatar: "",
				age: "",
			},
			loadFlag: false,
			messageFlag: false,
			messageSize: 10,
			chatSize: 0,
			userAvatar: "",
			content: "",
			/* 产品列表 */
			productList: [],
			/* 聊天数据 */
			// talkList: [],
			/* 患者资料 */
			xtData: {},
		};
	},
	computed: {
		...mapState("m_message", ["talkList"]),
		talkLists() {
			let messagesSize = this.talkList.filter(obj => obj.friendId == this.form.userId && obj.message.consultationOrderId == this.form.consultationOrderId).map(obj => obj.message)
				.length
			this.messageFlag = messagesSize > 10 ? true : false;
			this.scrollToBottom();

			let size = messagesSize - this.messageSize - this.chatSize < 0 ? 0 : messagesSize - this.messageSize - this
				.chatSize;

			const messageSessionId = this.form.userId
			// this.$store.commit('m_message/changeConversationList', messageSessionId);

			return this.talkList.filter(obj => obj.friendId == this.form.userId && (obj.message.fromId == this.form
				.userId ||
				obj.message.toId == this.form.userId)&&obj.message.consultationOrderId == this.form.consultationOrderId ).map(obj => obj.message).slice(size, messagesSize)
		},
	},
	onLoad(options) {
		if (options.data) {
			/* decodeURIComponent */
			let data = JSON.parse(decodeURIComponent(options.data));
			/* 外面传来的参数 */
			this.user.name = data.name;
			this.user.gender = data.gender;
			this.xtData = {
				...data,
			};
			console.log(data, 'tada');
			this.userAvatar = data.avatar || "/static/online/user.png";
			this.form.userId = data.userId;
			this.form.consultationOrderId = data.consultationOrderId;
		}
		/*  */
		this.getList();
		this.orderDetail();
	},
	onShow() {
		this.scrollToBottom();
		this.setProduct();
		this.getWindowSize();
	},
	onUnload() {
		uni.$off("addProduct", () => {
			console.log("移除事件");
		});
	},
	methods: {
		...mapMutations("m_message", ["saveMessageStorage", "INSERT_MESSAGE_SESSION", "DELETE_CONVERSATIONOne",
			"DELETE_MessageOne", "RETRACT_MESSAGE"
		]),
		/*  */
		async orderDetail() {
			// uemployeeid
			let orderNo = uni.getStorageSync('orderNo')
			let re = await this.$API.orderApi.myorderDetail(orderNo)
			this.interrogationInfo = re
		},
		
		
		messageS() {
			this.loadFlag = true;
			this.messageFlag = false;

			setTimeout(() => {
				this.messageFlag = true;
				this.loadFlag = false;

				this.messageSize += 10
			}, 2000)

		},
		...mapGetters("m_message", ["getId"]),
		async getList() {
			let re = await this.$API.messageApi.userInformation(this.xtData);

			if (re) {
				this.xtData = re;
			}


		},
		setXtRelationship(obj) {
			if (obj === "0") {
				return "本人";
			} else if (obj === "1") {
				return "父母";
			} else if (obj === "2") {
				return "兄妹";
			} else if (obj === "3") {
				return "儿女";
			} else if (obj === "4") {
				return "其他";
			}
		},

		/* 选择菜单 */
		pickerMenu(e) {
			let index = Number(e.currentTarget.dataset.index);
			switch (index) {
				case 0:
					//复制
					this.copy(this.queryData.content);
					break;
				case 1:
					//删除
					this.deleteMessage(this.queryData.messageId);
					break;
				case 2:
					//撤回
					let currentTime = Date.now();
					let messageTime = this.queryData.createTime;

					if (currentTime - messageTime < 120000) {
						this.retractMessage(this.queryData);
					} else {
						uni.showToast({
							title: '只能撤回两分钟之内的信息',
							icon: "none"
						})
					}
					break;
				default:
					break;
			}

			this.hidePop();
		},
		copy(content) {
			uni.setClipboardData({
				data: content,
				success() {
					uni.showToast({
						title: "复制成功",
						icon: "success",
					});
				},
				fail() {
					uni.showToast({
						title: "复制失败",
						icon: "none",
					});
				},
			});
		},
		deleteMessage(id) {
			this.DELETE_MessageOne(id);

			/* 将传入的会话id */
			// this.DELETE_CONVERSATIONOne(this.friend.id);
			uni.showToast({
				title: "删除成功",
				icon: "success",
			});
		},
		/* 隐藏弹窗 */
		hidePop() {
			this.showPop = false;
			this.pickerUserIndex = -1;
			setTimeout(() => {
				this.showShade = false;
			}, 250);
		},

		/* 获取窗口尺寸 */
		getWindowSize() {
			uni.getSystemInfo({
				success: (res) => {
					this.winSize = {
						witdh: res.windowWidth,
						height: res.windowHeight,
					};
				},
			});
		},
		/* 长按监听 */
		onLongPress(e, payload, messagetype) {
			let [touches, style, index] = [
				e.touches[0],
				"",
				e.currentTarget.dataset.index,
			];

			/* 因 非H5端不兼容 style 属性绑定 Object ，所以拼接字符 */
			if (touches.clientY > this.winSize.height / 2) {
				style = `bottom:${this.winSize.height - touches.clientY}px;`;
			} else {
				style = `top:${touches.clientY}px;`;
			}
			if (touches.clientX > this.winSize.witdh / 2) {
				style += `right:${this.winSize.witdh - touches.clientX}px`;
			} else {
				style += `left:${touches.clientX}px`;
			}

			/* 传递参数 */
			this.queryData = payload;
			this.messagetype = messagetype;
			this.popStyle = style;
			this.pickerUserIndex = Number(index);
			this.showShade = true;
			this.$nextTick(() => {
				setTimeout(() => {
					this.showPop = true;
				}, 10);
			});

			let isExist = this.popButton.find(obj => obj == "撤回")
			if (this.queryData.fromId == this.unameId) {
				if (!isExist) {
					this.popButton.push("撤回");
				}
			} else {
				if (isExist) {
					const index = this.popButton.findIndex(obj => obj == "撤回");
					this.popButton.splice(index, 1);
				}
			}
		},
		handleTouchStart(e) {
			console.log("开始录音", e);
			uni.showLoading({
				title: "录音中...",
			});

			this.length = 1;
			recorderManager.start();
			this.timer = setInterval(() => {
				this.length += 1;
				console.log(this.length, "语音秒数");
				if (this.length >= 60) {
					clearInterval(this.timer);
				}
			}, 1000);
		},
		endRecord() {
			uni.hideLoading();
			recorderManager.stop();
			clearInterval(this.timer);
			recorderManager.onStop((res) => {
				this.Voice = res.tempFilePath;
				this.uploadRecord(this.Voice);
			});
		},
		/* 滚动条下面 */
		scrollToBottom() {
			setTimeout(() => {
				uni.pageScrollTo({
					scrollTop: 999999999,
					duration: 300,
				});
			});
		},
		/* 时间间隔 */
		shouldDisplayTimestamp(index) {
			if (index === 0) {
				return true; // 第一条消息总是显示时间戳
			}
			const currentTimestamp = this.talkLists[index].createTime;
			const previousTimestamp = this.talkLists[index - 1].createTime;
			const timeDiff = currentTimestamp - previousTimestamp;
			return timeDiff >= this.timestampThreshold;
		},
		//时间处理
		dateChange(val) {
			return getTimeStringAutoShort(val, true);
		},
		//重发
		reloadMessage(data) {
			let msg = {
				code: "5",
				message: data,
			};

			this.$ws.send(JSON.stringify(msg));
		},
		retractMessage(data) {
			let msg = {
				code: "6",
				message: {
					"messageId": data.messageId,
					"userId": data.toId,
					"messageType": "0"
				}
			}
			this.$ws.send(JSON.stringify(msg));
			this.RETRACT_MESSAGE(msg.message);
		},
		/* 发送文本内容 */
		sendMsgs() {
			// 发送内容不为空
			if (this.content.trim() != "") {
				this.sendMsg(this.content, 1);
			} else {
				uni.showToast({
					title: "信息内容不能为空",
					icon: "none",
				});
			}
		},
		/* 发送文本内容 */
		sendMsg(data, type) {
			this.message.messageId = this.$uuid();

			this.message.fromId = uni.getStorageSync("ID");

			this.message.toId = this.form.userId;

			this.message.createTime = new Date();
			/* 类型 */
			this.message.type = type;

			this.message.isUemployee = true

			/* 内容 */
			this.message.content = data;

			this.message.readStatus = 0

			this.message.avatar = '/static/online/doctor.png'

			this.message.unickname = uni.getStorageSync("userInfo").uname
			
			
			/*  */
			this.message.consultationOrderId = this.form.consultationOrderId
			

			// type 1文字 2语音 3图片
			let msg = {
				code: "2",
				message: this.message,
			};
			/*页面保存 */
			let newdata = {
				friendId: this.form.userId,
				message: {
					...msg.message,
				},
			};

			this.$ws.send(JSON.stringify(msg));
			/*  */
			this.saveMessageStorage(newdata);
			this.content = "";
			this.scrollToBottom();
		},
		
		getEvent(e) {
			let that = this;
			console.log(e);
			if (e == "图片") {
				uni.chooseImage({
					count: 1,
					sizeType: ["original", "compressed"],
					sourceType: ["album"], //这要注意，camera掉拍照，album是打开手机相册
					success: (res) => {
						const tempFilePaths = res.tempFilePaths;

						uni.uploadFile({
							url: this.$url + "/upload/image",
							filePath: tempFilePaths[0],
							name: "file",
							header: {
								Authorization: uni.getStorageSync("token"),
							},
							success: (uploadFileRes) => {
								console.log(JSON.parse(uploadFileRes.data).data.fileUrl,
									"JSON.parse(uploadFileRes.data).fileUrl");
								this.sendMsg(JSON.parse(uploadFileRes.data).data.fileUrl,
									2);
								this.closePopup()
							},
						});
					},
				});
			} else if (e == "拍照") {
				var self = this;
				uni.chooseImage({
					count: 1,
					sizeType: ["original", "compressed"],
					sourceType: ["camera"], //这要注意，camera掉拍照，album是打开手机相册
					success: (res) => {
						const tempFilePaths = res.tempFilePaths;
						// console.log(tempFilePaths[0], 6666);
						uni.uploadFile({
							url: self.$url + "/upload/image", //仅为示例，非真实的接口地址
							filePath: tempFilePaths[0],
							name: "file",
							header: {
								Authorization: uni.getStorageSync("token"),
							},
							success: (uploadFileRes) => {
								this.sendMsg(JSON.parse(uploadFileRes.data).data
									.fileUrl, 2);
								this.closePopup()
							},
						});
					},
				});
			} else if (e == "视频") {
				var self = this;
				uni.chooseVideo({
					sourceType: ["camera"],
					success: function (res) {
						console.log(res.tempFilePath);
						const tempFilePath = res.tempFilePath;
						uni.uploadFile({
							url: self.$url + "/upload/video",
							filePath: tempFilePath,
							name: "file",
							header: {
								Authorization: uni.getStorageSync("token"),
							},
							success: (res) => {
								self.sendMsg(JSON.parse(res.data).data.fileUrl, 4);
							},
						});
					},
				});
			} else if (e == "语音") {
				this.$refs.popup.close();
				this.flag = true;
			}
		},
		
		
		open() {
			// 通过组件定义的ref调用uni-popup方法 ,如果传入参数 ，type 属性将失效 ，仅支持 ['top','left','bottom','right','center']
			this.$refs.popup.open("bottom");
		},
		cxbj(item) {
			this.content = item.content
		},
		/* 监听商品 */
		setProduct() {
			let that = this;

			uni.$on("addProduct", (res) => {
				/* 获取本地缓存 */
				let data = uni.getStorageSync("localForm") || this.form;
				/* 页面传参 */
				// console.log(res, "res");
				/* 页面切换 */
				this.sele = res.sele;
				//------------------
				/* 判断是否重复 */
				let isProductAdded = data.productList.some((d) => {
					return d.uproductid == res.uproductid;
				});
				/* 是重复 改数量 */
				if (isProductAdded) {
					console.log("该商品已添加过");
					data.productList = data.productList.map((i) => {
						if (i.uproductid == res.uproductid) {
							i.count += 1;
						}
						return i;
					});
					/* 结束要回填数据 */
					this.form = {
						...data,
					};
					return;
				} else {
					/* 添加 */
					data.productList.push(res);
				}
				/* 回填数据 */
				this.form = {
					...data,
				};
				/* 添加商品 */
				// that.form.productList.push(res)
				// console.log(this.form, "formShop");
			});

			uni.$off("addProduct", () => {
				console.log("移除事件");
			});
		},
		/* 字符转 */
		setWord(num) {
			switch (num) {
				case 1:
					return `姓名:${this.user.name || ""}`;
					break;
				case 2:
					return `性别:${this.setStatus(this.user.gender) || ""}`;
					break;
				case 3:
					return `年龄:${this.user.age || ""}`;
					break;
				default:
					break;
			}
		},
		/* 跳转商品 */
		goShop() {
			console.log('shop',this.form);
			/*  */
			uni.$emit('showShop',true)
			/*  */
			uni.switchTab({
				url: "/pages/shop/shop",
			});
			
			
			/* 每次跳转 保存数据 */
			uni.setStorageSync("localForm", this.form);
			/* tarbar跳转 */
			

			// this.$pub.go(`/pages/shop/shop?flag=${}`)
			// uni.navigateTo({
			// 	url: "/pages/shop/shop?flag=" + true,
			// });
		},
		/* 字符转 */
		setStatus(status) {
			let obj = {
				1: "男",
				2: "女",
			};
			return obj[status];
		},
		getAn() {
			this.flag = !this.flag;
		},
		/* 提交处方 */
		async setPrescription() {
			console.log(this.form, "form");
			let re = await this.$API.prescriptionApi.setPrescription(this.form);
			if (re) {
				uni.showToast({
					title: "处方提交成功，等待医师审核",
				});

				this.sendMsg("", 5);
			}
			this.sele = 0;
		},
		yesOrNo1() {
			let that = this;
			uni.showActionSheet({
				itemList: ["是", "否"],
				success: function (res) {
					console.log(res, "yesRes");
					let bool = false;
					if (res.tapIndex == "0") {
						bool = true;
					} else {
						bool = false;
					}
					that.form.isLongtime = bool;
				},
				fail: function (res) {
					console.log(res.errMsg);
				},
			});
		},
		yesOrNo2() {
			let that = this;
			uni.showActionSheet({
				itemList: ["是", "否"],
				success: function (res) {
					let bool = false;
					if (res.tapIndex == "0") {
						bool = true;
					} else {
						bool = false;
					}
					that.form.isMoveDifficult = bool;
				},
				fail: function (res) {
					console.log(res.errMsg);
				},
			});
		},
		yesOrNo3() {
			let that = this;
			uni.showActionSheet({
				itemList: ["是", "否"],
				success: function (res) {
					let bool = false;
					if (res.tapIndex == "0") {
						bool = true;
					} else {
						bool = false;
					}
					that.yongyao = bool;

				},
				fail: function (res) {
					console.log(res.errMsg);
				},
			});
		},
	},
};
</script>

<style lang="scss">
@import "@/static/css/global.scss";
@import "@/static/styles/mycss.scss";
@import "@/static/styles/shade.scss";

.flex_grow {
	width: 0;
	flex-grow: 1;
}

.nr {
	font-size: 28rpx;
	height: 80rpx;
	width: 430rpx;
	background-color: #f5f5f5;
	border-radius: 30rpx;
	padding-left: 30rpx;
}

.talk-list {
	padding-bottom: 20rpx;

	/* 消息项，基础类 */
	.item {
		padding: 20rpx;
		align-items: flex-start;
		align-content: flex-start;
		color: #333;
		border-bottom: 0px;

		.pic {
			width: 90rpx;
			height: 90rpx;
			border-radius: 50%;
			border: #fff solid 1px;
		}

		.content {
			margin-top: 30rpx;
			padding: 10rpx 20rpx;
			border-radius: 4px;
			max-width: 500rpx;
			word-break: break-all;
			line-height: 52rpx;
			position: relative;
		}

		.contents {
			// height: 300rpx;
			margin-top: 30rpx;
			padding: 10rpx 20rpx;
			border-radius: 4px;
			max-width: 500rpx;
			word-break: break-all;
		}

		.imagepic {
			width: 200rpx;
			// height: 400rpx;
		}

		.bt-img {
			display: flex;
			align-items: center;
			margin: 0 10rpx;

		}

		.image {
			width: 56rpx;
			height: 56rpx;
		}

		.contentss {
			position: relative;
			margin-top: 30rpx;
			padding: 10rpx 20rpx;
			max-width: 500rpx;
			max-height: 500rpx;

			.video-size {
				width: 400rpx;
				// height: 100rpx;
			}
		}

		.contentfile {
			margin-top: 30rpx;
			padding: 20rpx;
			max-width: 500rpx;
			max-height: 500rpx;
			background-color: #fff;
			margin-right: 32rpx;
			display: flex;
			align-items: center;
			border-radius: 10rpx;
			position: relative;
			// text{
			// 	margin-left: 20rpx;
			// }
		}

		/* 收到的消息 */
		&.pull {
			.content {
				margin-left: 20rpx;
				background-color: #fff;

				&::after {
					content: "";
					display: block;
					width: 0;
					height: 0;
					border-top: 16rpx solid transparent;
					// border-bottom: 16rpx solid transparent;
					border-right: 20rpx solid #f1f1f1;
					position: absolute;
					top: 20rpx;
					left: -18rpx;
				}

				.content-nr {
					position: absolute;
					left: 0;
					top: 120rpx;
					z-index: 100;
					width: 500rpx;
					height: 300rpx;
					display: flex;
					flex-wrap: wrap;
					justify-content: center;
					background-color: #3d4043;

					.content-nr-yi {
						padding: 20rpx;
						color: #fff;
						// position: absolute;
					}

					.tan-qian {
						position: absolute;
						left: 65rpx;
						top: -35rpx;
						border: 20rpx solid;
						border-color: transparent transparent #3d4043 transparent;
					}
				}
			}

			.contentfile {
				.content-nr {
					position: absolute;
					left: 0;
					top: 120rpx;
					z-index: 100;
					width: 500rpx;
					height: 300rpx;
					display: flex;
					flex-wrap: wrap;
					justify-content: center;
					background-color: #3d4043;

					.content-nr-yi {
						padding: 20rpx;
						color: #fff;
					}

					.tan-qian {
						position: absolute;
						left: 65rpx;
						top: -35rpx;
						border: 20rpx solid;
						border-color: transparent transparent #3d4043 transparent;
					}
				}
			}
		}

		/* 发出的消息 */
		&.push {
			/* 主轴为水平方向，起点在右端。使不修改DOM结构，也能改变元素排列顺序 */
			flex-direction: row-reverse;

			.content {
				margin-right: 20rpx;
				background-color: #a0e959;

				&::after {
					content: "";
					display: block;
					width: 0;
					height: 0;
					border-top: 16rpx solid transparent;
					border-bottom: 16rpx solid transparent;
					border-left: 20rpx solid #a0e959;
					position: absolute;
					top: 20rpx;
					right: -18rpx;
				}

				.content-nr {
					position: absolute;
					left: -330rpx;
					top: 130rpx;
					z-index: 100;
					display: flex;
					flex-wrap: wrap;
					width: 500rpx;
					height: 300rpx;
					justify-content: center;
					background-color: #3d4043;

					.content-nr-yi {
						padding: 20rpx;
						color: #fff;
						// position: absolute;
					}

					.tan-qian {
						position: absolute;
						left: 402rpx;
						top: -35rpx;
						border: 20rpx solid;
						border-color: transparent transparent #3d4043 transparent;
					}
				}
			}

			.contentfile {
				.content-nr {
					position: absolute;
					left: -330rpx;
					top: 130rpx;
					z-index: 100;
					display: flex;
					flex-wrap: wrap;
					width: 500rpx;
					height: 300rpx;
					justify-content: center;
					background-color: #3d4043;

					.content-nr-yi {
						padding: 20rpx;
						color: #fff;
						// position: absolute;
					}

					.tan-qian {
						position: absolute;
						left: 402rpx;
						top: -35rpx;
						border: 20rpx solid;
						border-color: transparent transparent #3d4043 transparent;
					}
				}
			}
		}
	}
}

.push {
	/* 主轴为水平方向，起点在右端。使不修改DOM结构，也能改变元素排列顺序 */
	flex-direction: row-reverse;
}

.pull {
	.mes {
		flex-direction: row-reverse;
	}
}

.sele {
	color: #2d81ff;
	background-color: white;
	padding: 10rpx 20rpx;
	border-radius: 10rpx;
}

.box-2 {
	position: fixed;
	left: 0;
	width: 100%;
	bottom: 0;
	height: auto;
	z-index: 10;
	border-top: #e5e5e5 solid 1px;
	box-sizing: content-box;
	background-color: #f3f3f3;

	/* 兼容iPhoneX */
	padding-bottom: 0;
	padding-bottom: constant(safe-area-inset-bottom);
	padding-bottom: env(safe-area-inset-bottom);

	>view {
		padding: 0 30rpx;
		height: 100rpx;
	}

	.msg-voice {
		.voice {
			display: flex;
			align-items: center;
			justify-content: space-between;
			min-width: 80rpx;
			max-width: 400rpx;

			.voice-img {
				width: 48rpx;
				height: 48rpx;
			}
		}
	}

	.content {
		background-color: #fff;
		height: 64rpx;
		padding: 20rpx;
		border-radius: 32rpx;
		font-size: 26rpx;
	}

	.message {
		max-width: 480rpx;

		.msg-text {
			font-size: $uni-font-size-lg;
			color: $uni-text-color;
			line-height: 44rpx;
			padding: 18rpx 24rpx;
			/* 强制换行 */
			word-break: break-all;
		}

		.msg-img {
			max-width: 400rpx;
			border-radius: $uni-border-radius-base;
		}

		.msg-map {
			width: 460rpx;
			background-color: #fff;

			.map-name {
				font-size: $uni-font-size-lg;
				color: $uni-text-color;
				line-height: 44rpx;
				padding: 18rpx 24rpx 0 24rpx;
				text-overflow: ellipsis;
				/*可以用来多行文本的情况下，用省略号“…”隐藏超出范围的文本 。*/
				overflow: hidden;
				display: -webkit-box;
				-webkit-line-clamp: 1;
				/* 设置文本超出的行数，显示省略号*/
				-webkit-box-orient: vertical;
			}

			.map-address {
				font-size: $uni-font-size-sm;
				color: $uni-text-color-disable;
				padding: 0 24rpx;
				text-overflow: ellipsis;
				/*可以用来多行文本的情况下，用省略号“…”隐藏超出范围的文本 。*/
				overflow: hidden;
				display: -webkit-box;
				-webkit-line-clamp: 1;
				/* 设置文本超出的行数，显示省略号*/
				-webkit-box-orient: vertical;
			}

			image {
				width: 100%;
				height: 250rpx;
			}
		}
	}

	// .send {
	// 	background-color: #08b69f;
	// 	color: #fff;
	// 	height: 64rpx;
	// 	margin-left: 20rpx;
	// 	border-radius: 5px;
	// 	padding: 0;
	// 	width: 120rpx;
	// 	line-height: 62rpx;

	// 	&:active {
	// 		background-color: #5fc496;
	// 	}
	// }
}

.box-1 {
	width: 100%;
	height: auto !important;

	padding-bottom: 185rpx;
	box-sizing: content-box;

	/* 兼容iPhoneX */
	margin-bottom: 0;
	margin-bottom: constant(safe-area-inset-bottom);
	margin-bottom: env(safe-area-inset-bottom);
}

.send {
	background-color: #08b69f;
	color: #fff;
	height: 64rpx;
	margin-left: 20rpx;
	border-radius: 5px;
	padding: 0;
	width: 120rpx;
	line-height: 62rpx;

	&:active {
		background-color: #5fc496;
	}
}

.chat-time {
	font-size: $uni-font-size-sm;
	color: $uni-text-color;
	line-height: 34rpx;
	padding: 20rpx 0;
	text-align: center;
}

.jieshao {
	// height: 640rpx;
	height: 340rpx;
	// background-color: #fff;
	background-color: #f3f3f3;
	display: flex;
	// align-items: center;
	// justify-content: space-between;
	justify-content: flex-start;
	padding: 0 20rpx;
	flex-wrap: wrap;

	// align-items: center;
	.jieshao-yi {
		padding: 40rpx;

		// height: 100rpx;
		image {
			width: 90rpx;
			height: 90rpx;
		}

		.jieshao-yi-wz {
			margin-top: 10rpx;
			text-align: center;
		}
	}
}
</style>